<template>
  <view
    :class="cusClass"
    :style="[listProps?.itemStyle || {}, newStyle, cusStyle]"
    :hoverClass="isHover && !isDisabled ? 'hover' : 'none'"
    :hoverStartTime="0"
    :hoverStayTime="0"
    class="mxp-list-item"
    @click="onClick"
  >
    <view class="subject-view">
      <view class="content-view" :style="newContentViewStyle">
        <slot></slot>
      </view>
      <view v-if="isArrow" class="arrow-view">
        <mxp-icon name="youjiantou" :size="newArrowSize" :color="nweArrowColor"></mxp-icon>
      </view>
    </view>
    <mxp-line :cusStyle="newLineStyle" :color="borderBottomColor"></mxp-line>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type CSSProperties, type PropType, computed, inject, onMounted, ref } from 'vue';
  import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import MxpLine from '@/mxp-ui/mxp-line/mxp-line.vue';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  import { type ListID, type MxpListProps, listInjectKey, mxpListStore } from '../mxp-tool/store/mxp-store-list';
  import { defThemeColor } from '../mxp-tool/theme/theme';
  defineOptions({
    name: 'mxp-list-item',
  });

  const props = defineProps({
    /** 最小高度 */
    minHeight: { type: String as PropType<$SizeUnitStr>, default: undefined },
    /** Padding 默认 '0px 0px' */
    padding: { type: String as PropType<$SizeUnitArr4Str>, default: '0px 0px' },
    /** 是否禁止点击 */
    disabled: { type: Boolean, default: undefined },
    /** 是否显示箭头 */
    arrow: { type: Boolean, default: undefined },
    /** 箭头大小 */
    arrowSize: { type: String as PropType<$SizeUnitStr>, default: undefined },
    /** 箭头颜色 */
    arrowColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 是否有点击效果 */
    hover: { type: Boolean, default: undefined },
    /** 底部边框颜色 */
    borderColor: { type: [Boolean, String] as PropType<$AllColorStr | boolean>, default: true },
    /** 内容容器的样式 */
    contentViewStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    /** 底部边框样式 */
    lineStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 主体内容 */
    default: () => void;
  }>();
  const emits = defineEmits<{
    (e: 'click'): void;
  }>();
  /** 接收mxp-list组件中的ID */
  const mxpListIDInjectKey = ref<ListID | undefined>(undefined);
  const listStore = mxpListStore();
  onMounted(() => {
    /** 解决抖音初始化父子关系初始化较晚问题 */
    mxpListIDInjectKey.value = mxpListIDInjectKey.value ? mxpListIDInjectKey.value : inject<ListID>(listInjectKey);
  });
  const listProps = computed<MxpListProps>(() => {
    const defGridProps: MxpListProps = {};
    if (mxpListIDInjectKey.value && listStore.state[mxpListIDInjectKey.value]) {
      return listStore.state[mxpListIDInjectKey.value]?.listProps || defGridProps;
    } else {
      return defGridProps;
    }
  });
  const isArrow = computed(() =>
    typeof props.arrow === 'boolean' ? props.arrow : typeof listProps.value?.itemArrow === 'boolean' ? listProps.value?.itemArrow : false
  );
  const isHover = computed(() =>
    typeof props.hover === 'boolean' ? props.hover : typeof listProps.value?.itemHover === 'boolean' ? listProps.value?.itemHover : false
  );

  const newArrowSize = computed(() => (props.arrowSize ? props.arrowSize : listProps.value?.itemArrowSize ? listProps.value?.itemArrowSize : '12px'));
  const nweArrowColor = computed(() =>
    props.arrowColor ? props.arrowColor : listProps.value?.itemArrowColor ? listProps.value?.itemArrowColor : defThemeColor.value.border
  );
  const isDisabled = computed(() =>
    typeof props.disabled === 'boolean' ? props.disabled : typeof listProps.value?.itemDisabled === 'boolean' ? listProps.value?.itemDisabled : false
  );

  const newStyle = computed<CSSProperties>(() => {
    return {
      minHeight: props.minHeight ? props.minHeight : listProps.value?.itemMinHeight ? listProps.value?.itemMinHeight : '48px',
      padding: props.padding ? props.padding : listProps.value?.itemPadding ? listProps.value?.itemPadding : '0px',
    };
  });

  const borderBottomColor = computed<$AllColorStr | boolean | undefined>(() => {
    return typeof props.borderColor !== 'undefined' ? props.borderColor : listProps.value?.itemBorderColor;
  });

  const newContentViewStyle = computed<CSSProperties[]>(() => {
    return [props.contentViewStyle, listProps.value?.itemContentViewStyle || {}];
  });

  const newLineStyle = computed<CSSProperties>(() => {
    return { ...props.lineStyle, ...(listProps.value?.itemLineStyle || {}) };
  });
  /** 点击事件 */
  function onClick() {
    emits('click');
  }
</script>

<style scoped lang="scss">
  .mxp-list-item {
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: center;

    &.hover {
      opacity: 0.7;
    }

    .subject-view {
      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: center;

      .content-view {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
      }

      .arrow-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
      }
    }
  }
</style>
